inline-style-prefixer
Advanced tools
The inline-style-prefixer is a JavaScript library used for automatically adding vendor prefixes to CSS styles defined in JavaScript objects. This is particularly useful when developing React applications that handle styles primarily in JavaScript. The prefixer uses the user agent to determine which prefixes are necessary for the current browser, ensuring cross-browser compatibility for CSS properties that require vendor prefixes.
Automatic Prefixing
Automatically adds necessary CSS vendor prefixes to style objects based on the current browser's requirements.
{"display": 'flex'} // becomes {'display': ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex']} after processingUser Agent Based Prefixing
Initializes the prefixer with a specific user agent to tailor the prefixing process to a particular browser's needs.
const prefixer = new Prefixer({userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36'}); const style = prefixer.prefix({display: 'flex'});Autoprefixer is a more robust solution that integrates with build tools like PostCSS to automatically add vendor prefixes to CSS files. Unlike inline-style-prefixer, which is designed for inline styles in JavaScript, Autoprefixer works with static CSS files, making it suitable for a broader range of web development tasks.
PostCSS-prefixer is a PostCSS plugin that allows developers to add prefixes to CSS properties manually. It requires explicit configuration for each prefix, offering more control but less automation compared to inline-style-prefixer, which automatically determines necessary prefixes.
inline-style-prefixer adds required vendor prefixes to your style object. It only adds prefixes if they're actually required by evaluating the browser's userAgent against data from caniuse.com.
Supports the major browsers with the following versions.
For legacy support check custom build.
If using an unsupported browser or even run without any userAgent, it will use inline-style-prefix-all as a fallback.
If you got any issue using this prefixer, please first check the FAQ's. Most cases are already covered and provide a solid solution.
npm install inline-style-prefixer --save
import Prefixer from 'inline-style-prefixer'
const styles = {
transition: '200ms all linear',
userSelect: 'none',
boxSizing: 'border-box',
display: 'flex',
color: 'blue'
}
const prefixer = new Prefixer()
const prefixedStyles = prefixer.prefix(styles)
// Assuming you are using e.g. Chrome version 25
// prefixedStyles === output
const output = {
transition: '200ms all linear',
WebkitUserSelect: 'none',
boxSizing: 'border-box',
display: '-webkit-flex',
color: 'blue'
}
Default: navigator.userAgent
Sometimes your environment does not provide a proper userAgent string e.g. if you are rendering on server-side. Therefore optionally just pass a userAgent-string.
const customUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36'
const prefixer = new Prefixer({userAgent: customUserAgent})
Default: false
Use this option to keep default values. This should be used if you're facing wrong prefixes.
const styles = {
userSelect: 'none',
display: 'flex'
}
const prefixer = new Prefixer({keepUnprefixed: true})
const prefixedStyles = prefixer.prefix(styles)
// Assuming you are using e.g. Chrome version 22
// prefixedStyles === output
const output = {
WebkitUserSelect: 'none',
// unprefixed properties do not get removed
userSelect: 'none',
// unprefixed values will be appended to the string
display: '-webkit-flex;display:flex'
}
Deprecated! Use inline-style-prefix-all if you only need static prefixing.
If you want static prefixing for every browser you can use Prefixer.prefixAll which uses inline-style-prefix-all, but this will be removed soon.
const styles = {alignItems: 'center'}
const prefixedStyles = Prefixer.prefixAll(styles)
// the userAgent doesn't matter
// prefixedStyles === output
const output = {
WebkitAlignItems: 'space-around',
msAlignItems: 'space-around',
alignItems: 'space-around',
// it also adds legacy properties and values
// by running every plugin available
WebkitBoxAlign: 'justify',
msFlexAlign: 'distribute',
}
Every Prefixer instance also provides prefix information.
// e.g. using a Chrome version 40 userAgent
prefixer.cssPrefix = '-webkit-'
prefixer.jsPrefix = 'Webkit'
prefixer.prefixedKeyframes = '-webkit-keyframes'
You may have to create a custom build if you need older browser versions. Just modify the config.js file which includes all the browser version specifications.
npm install
npm run build
inline-style-prefixer is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.
I would love to see people getting involved.
If you have a feature request please create an issue. Also if you're even improving inline-style-prefixer by any kind please don't be shy and send a pull request to let everyone benefit.
If you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.
If you are creating a pull request, try to use commit messages that are self-explanatory. Also always add some tests unless it's totally senseless (add a reason why it's senseless) and test your code before you commit so Travis won't throw errors.
1.0.4
FAQs
Run-time Autoprefixer for JavaScript style objects
The npm package inline-style-prefixer receives a total of 2,344,640 weekly downloads. As such, inline-style-prefixer popularity was classified as popular.
We found that inline-style-prefixer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.